'use client';

import { useState } from 'react';
import { useAuth } from '@/hooks/use-auth';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Sheet, SheetContent, SheetTrigger, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Menu } from 'lucide-react';
import { navigationConfig } from '@/config/navigation';
import { cn } from '@/lib/utils';

export function MobileSidebar() {
  const { user } = useAuth();
  const [open, setOpen] = useState(false);
  const pathname = usePathname();

  const items = user ? navigationConfig[user.role] : [];

  if (!user) {
    return null;
  }

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="md:hidden">
          <Menu className="h-5 w-5" />
          <span className="sr-only">打开菜单</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="p-0">
        <SheetHeader className="border-b p-6">
          <SheetTitle>家校通系统</SheetTitle>
          <p className="text-sm text-muted-foreground">欢迎，{user.name}</p>
        </SheetHeader>
        <ScrollArea className="h-[calc(100vh-80px)]">
          <div className="px-2 py-4">
            <nav>
              <ul className="space-y-2">
                {items.map((item) => (
                  <li key={item.href}>
                    {item.children ? (
                      <div className="px-3 py-2">
                        <div className="text-sm font-medium text-muted-foreground mb-2">
                          {item.label}
                        </div>
                        <ul className="pl-3 space-y-1">
                          {item.children.map((child) => (
                            <li key={child.href}>
                              <Link
                                href={child.href}
                                onClick={() => setOpen(false)}
                                className={cn(
                                  "block px-3 py-2 text-sm rounded-md transition-colors",
                                  "hover:bg-accent hover:text-accent-foreground",
                                  pathname === child.href && "bg-primary text-primary-foreground"
                                )}
                              >
                                {child.label}
                              </Link>
                            </li>
                          ))}
                        </ul>
                      </div>
                    ) : (
                      <Link
                        href={item.href}
                        onClick={() => setOpen(false)}
                        className={cn(
                          "block px-3 py-2 text-sm font-medium rounded-md transition-colors",
                          "hover:bg-accent hover:text-accent-foreground",
                          pathname === item.href && "bg-primary text-primary-foreground"
                        )}
                      >
                        {item.label}
                      </Link>
                    )}
                  </li>
                ))}
              </ul>
            </nav>
          </div>
        </ScrollArea>
      </SheetContent>
    </Sheet>
  );
} 